<!--
 * @LastEditors: YuSeen 2290515673@qq.com
 * @LastEditTime: 2022-07-18 20:20:58
 * 天凉好个秋
-->
<template>
    <div class="menus no-drag">
        <a-popover over :visible="showSkinPop" trigger="click" :color="bgColor"
            @visibleChange="(v: boolean) => showSkinPop = v">
            <div class="menu-item" @click="showSkinPop = !showSkinPop">
                <SvgIcon name="skin-icon" size="16" :fill="iconColor" />
            </div>
            <template #content>
                <skinPopover />
            </template>
        </a-popover>
        <div class="menu-item" @click="changeLang">
            <SvgIcon name="setting-icon" size="18" :fill="iconColor" />
        </div>
        <div class="menu-item">
            <SvgIcon name="message-icon" size="18" :fill="iconColor" />
        </div>
    </div>
</template>

<script lang='ts' setup>
import { ref, computed } from 'vue'
import SvgIcon from '../svgIcon/svgIcon.vue';
import { bgColorEnum } from '@/types/design/popoverType'
import { useSettingStore } from '@/store/setting'
import skinPopover from './skinPopover.vue';
import { useLangSetting } from '@/hooks/setting/useLangSetting';
import { LangEnmu } from '@/types/store/settingStoreType';

const settingStore = useSettingStore()
const { currentLang, setLang } = useLangSetting()

// 气泡背景颜色
const bgColor = computed(() => settingStore.isDark ? bgColorEnum.DARK : bgColorEnum.LIGHT)

// icon颜色
const iconColor = ref('rgba(255,255,255,.9)')

// 是否显示弹窗
const showSkinPop = ref(false)
// 切换语言
const changeLang = () => {
    switch (currentLang) {
        case LangEnmu.ZH_CN:
            setLang(LangEnmu.EN)
            break;
        case LangEnmu.EN:
            setLang(LangEnmu.ZH_CN)
            break;
    }
}
</script>

<style scoped lang='scss'>
.menus {
    @apply flex items-center justify-evenly;
    width: 123px;
    height: 100%;
}

:global(.ant-popover-inner) {
    transition-property: background-color;
    transition-duration: .3s;
}
</style>